<template>
  <div class="advance-query">
    <el-form ref="advanceForm" :model="queryParams" :inline="inline" :class="inline ? '' : 'dataForm'">
      <el-row>
        <el-col v-for="(item,index) in queryConditions" v-show="!item.isHide" :key="index" :span="getSpan">
          <el-form-item :rules="[{required: item.required,trigger:item.trigger,message: $t(item.message)}]" :prop="item.prop" :label="$t(item.label)">
            <el-input v-if="item.component === 'input'" v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" />
            <user-select v-if="item.component === 'user'" v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" />
            <template v-if="item.component === 'dept'">
              <el-row>
                <el-col :span="20" style="margin-right: 10px;">
                  <dept-select v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" />
                </el-col>
                <el-col :span="2">
                  <el-checkbox v-model="queryParams[item.prop + 'Checked']">{{ $t('含子部门') }}</el-checkbox>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.component === 'select'">
              <dict-select v-if="item.format === 'dict'" v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" :dictionary="item.dictData" />
              <data-source-dict v-if="item.format === 'dataSource'" v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" :dictionary="item.dictData" />
              <data-source-dict v-if="item.format === 'dataSourceUnion'" v-model="queryParams[item.prop]" :placeholder="$t(item.placeholder)" type="dataSourceUnion" :query="queryParams[item.unionField]" :dictionary="item.dictData" />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="info" @click="resetQuery">{{ $t("重置") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("查询") }}</el-button>
    </div>
  </div>
</template>

<script>
 import DataSourceDict from '@/components/DictSelect/dataSourceDict.vue'

 export default {
   components: { DataSourceDict },
   props: {
     span: {
       type: Number,
       default: 2
     },
     queryConditions: {
       type: Array,
       required: true,
       default: () => []
     },
     queryParams: {
       type: Object,
       default: () => {}
     },
     inline: {
       type: Boolean,
       default: false
     }
   },
   computed: {
     getSpan() {
       var totalSpan = 24
       return totalSpan / this.span
     }
   },
   methods: {
     cancel() {
       this.$parent.$parent.advanceOpen = false
     },
     submitForm() {
       this.$emit('search')
       this.cancel()
     },
     resetQuery() {
       this.$emit('resetQuery')
     }
   }
 }
</script>

<style lang="scss" scoped>

</style>
